<template>
    <div id="question">
        <shrink-bar></shrink-bar>
        <!--面包屑开始-->

        <div class="bread ww">
            <router-link to="/" tag="a"><i class="iconfont">&#xe6a2;</i>首页</router-link>
            <span class="iconfont">&#xe603;</span>
            <router-link to="/qa" tag="a">创业问答</router-link>
            <span class="iconfont">&#xe603;</span>
            <a href="javascript:void(0);">提问</a>
        </div>

        <!--顶部图片开始-->

        <div class="top_img">
            <a href="javascript:void(0);">
                <img src="./images/yu_top.jpg" alt="">
            </a>
        </div>

        <!--正文开始-->
        <main class="ww">
            <div class="m-left">
                <!--问题表单-->
                <div class="ml-pro">
                    <!--提问题-->
                    <el-form :model="question" label-width="80px" ref="question">
                        <el-form-item label="">
                            <el-input v-model="question.qs" placeholder="请用一句话描述您的疑问。"></el-input>
                        </el-form-item>
                        <el-form-item label="" style="margin-left: 0;">

                            <el-upload
                                    class="upload-demo"
                                    action="https://jsonplaceholder.typicode.com/posts/"
                                    :on-preview="handlePreview"
                                    :on-remove="handleRemove"
                                    :file-list="fileList"
                                    list-type="picture">
                                <el-button size="small" type="primary">问题描述（图片宽高不超过500像素，大小不超过1M）</el-button>

                            </el-upload>

                        </el-form-item>

                        <el-form-item>
                            <el-checkbox v-model="question.checked">匿名</el-checkbox>
                            <el-button type="danger" size="mini" @click="submitForm('question')">提交</el-button>
                        </el-form-item>
                    </el-form>

                    <!--热门问题-->
                    <div class="hot-problem">
                        <!--标题-->
                        <h2 class="hp-title">热门问题</h2>
                        <ul class="hp-nav">
                            <router-link to="/answer" tag="li">
                                <a href="javascript:void(0);">
                                    <span>2019-1-10</span>
                                    <span>开家地锅鸡店的成本 开地锅鸡饭店赚钱吗？</span>
                                    <span><i>0</i>回答</span>
                                </a>
                            </router-link>
                            <li>
                                <a href="javascript:void(0);">
                                    <span>2019-1-10</span>
                                    <span>开家地锅鸡店的成本 开地锅鸡饭店赚钱吗？</span>
                                    <span><i>0</i>回答</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">
                                    <span>2019-1-10</span>
                                    <span>开家地锅鸡店的成本 开地锅鸡饭店赚钱吗？</span>
                                    <span><i>0</i>回答</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">
                                    <span>2019-1-10</span>
                                    <span>开家地锅鸡店的成本 开地锅鸡饭店赚钱吗？</span>
                                    <span><i>0</i>回答</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">
                                    <span>2019-1-10</span>
                                    <span>开家地锅鸡店的成本 开地锅鸡饭店赚钱吗？</span>
                                    <span><i>0</i>回答</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

                <qa-form></qa-form>


            </div>

            <div class="m-right">
                <!--品牌推荐-->
                <div class="mr-recommend">
                    <div class="mrr-title">

                    </div>
                    <ul>
                        <li>
                            <a href="javascript:void(0);">
                                <img src="./images/re01.png" alt="">
                                <div>
                                    <p>煲百味</p>
                                    <p>加盟费：<i>1-5万</i></p>
                                    <p>已有：1245人申请加盟</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">
                                <img src="./images/re02.png" alt="">
                                <div>
                                    <p>煲百味</p>
                                    <p>加盟费：<i>1-5万</i></p>
                                    <p>已有：1245人申请加盟</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">
                                <img src="./images/re03.png" alt="">
                                <div>
                                    <p>煲百味</p>
                                    <p>加盟费：<i>1-5万</i></p>
                                    <p>已有：1245人申请加盟</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">
                                <img src="./images/re04.png" alt="">
                                <div>
                                    <p>煲百味</p>
                                    <p>加盟费：<i>1-5万</i></p>
                                    <p>已有：1245人申请加盟</p>
                                </div>
                            </a>
                        </li>
                    </ul>
                    <a href="javascript:void(0);" class="huan">
                        <img src="./images/huan.png" alt="">
                        <i>换一批</i>
                    </a>
                </div>
                <!--最新资讯-->
                <div class="mr-news">
                    <div class="mrn-title">

                    </div>
                    <ul>
                        <li>
                            <a href="javascript:void(0);">创业加盟还是自营比较好，看过创业加盟还是自营比较好，看过...</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">创业加盟还是自营比较好，看过创业加盟还是自营比较好，看过...</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">创业加盟还是自营比较好，看过创业加盟还是自营比较好，看过...</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">创业加盟还是自营比较好，看过创业加盟还是自营比较好，看过...</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">创业加盟还是自营比较好，看过创业加盟还是自营比较好，看过...</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">创业加盟还是自营比较好，看过创业加盟还是自营比较好，看过...</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">创业加盟还是自营比较好，看过创业加盟还是自营比较好，看过...</a>
                        </li>
                    </ul>
                </div>
            </div>
        </main>

    </div>
</template>

<script>

    import shrinkBar from "@/components/tabBar/shrinkBar"
    import qaForm from "@/components/qaForm/qaForm"

    export default {
        name: "Question",
        data() {
            return {
                // 问题表单
                question: {
                    qs: "",
                    checked: false
                },
                // 图片上传列表
                fileList: [],
            }
        },
        methods: {
            // 问题表单提交
            submitForm() {
                console.log(123)
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
        },
        mounted() {

        },
        components: {
            shrinkBar,
            qaForm
        }
    }
</script>

<style lang="less">
    #question {

        /* 面包屑开始 */

        .bread {
            margin-top: 19px;
            margin-bottom: 19px;

            a {
                font-size: 12px;
                color: #4f646a;

                &:nth-of-type(1) {
                    i {
                        font-size: 12px;
                        color: #4f646a;
                        margin-right: 4px;
                    }
                }

                &:hover {
                    color: #f32222;

                    i {
                        color: #f32222;
                    }
                }
            }

            span {
                color: #4f646a;
                font-size: 12px;
                margin-left: 3px;
                margin-right: 3px;
                cursor: pointer;
            }
        }

        /* 顶部图片开始 */

        .top_img {
            width: 1203px;
            height: 100px;
            margin: 0 auto 44px auto;

            a {
                width: 1203px;
                height: 100px;
                display: block;

                img {
                    width: 100%;
                    display: block;
                }
            }
        }

        /* 正文开始 */

        main {
            display: flex;
            justify-content: space-between;
            padding-bottom: 212px;

            .m-left {
                flex: 0 0 874px;
                /* 问题表单 */

                .ml-pro {
                    width: 100%;
                    background-color: #fff;
                    border: 1px solid #eaeaea;
                    padding: 10px 10px 27px 10px;

                    .el-form-item__content {
                        margin-left: 0 !important;


                    }

                    .el-input__inner {
                        color: #1e2629;
                        font-size: 16px;
                        padding-left: 25px;

                        &::-webkit-input-placeholder {
                            color: #8aa0a6;
                        }
                    }

                    .upload-demo {
                        border: 1px solid #dcdfe6;
                        -webkit-border-radius: 4px;
                        -moz-border-radius: 4px;
                        border-radius: 4px;
                        padding: 10px;
                    }

                    .el-button.el-button--primary.el-button--small {
                        border: none;
                        background-color: transparent;
                        font-size: 16px;
                        color: #8aa0a6;
                    }

                    .el-button.el-button--danger.el-button--mini {
                        position: absolute;
                        right: 10px;
                        background-color: #f32222;
                    }

                    .el-checkbox {
                        position: absolute;
                        right: 60px;
                        top: -5px;

                        .el-checkbox__input.is-focus {
                            .el-checkbox__inner {
                                border-color: #e8332f;
                            }
                        }

                        &.is-checked {
                            .el-checkbox__label {
                                color: #e8332f;
                            }

                            .el-checkbox__inner {
                                background-color: #e8332f;
                                border-color: #e8332f;
                            }
                        }

                    }

                    /* 热门问题 */

                    .hot-problem {
                        width: 831px;
                        border-top: 1px solid #c4d3d4;
                        border-bottom: 1px solid #c4d3d4;
                        margin-top: 69px;
                        position: relative;
                        padding-top: 35px;
                        padding-left: 23px;

                        .hp-title {
                            position: absolute;
                            width: 89px;
                            height: 20px;
                            font-size: 18px;
                            line-height: 20px;
                            color: #4f646a;
                            top: -11px;
                            z-index: 123;
                            left: 0;
                            background-color: #fff;
                        }

                        .hp-nav {
                            li {
                                margin-bottom: 17px;

                                a {
                                    font-size: 14px;
                                    color: #4f646a;

                                    span {
                                        font-size: 14px;

                                        &:nth-of-type(1) {
                                            margin-right: 32px;
                                        }

                                        &:nth-of-type(2) {

                                        }

                                        &:nth-of-type(3) {
                                            float: right;

                                            i {
                                                font-style: normal;
                                            }
                                        }
                                    }

                                    &:hover {
                                        span {
                                            &:nth-of-type(2) {
                                                color: #f51630;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }


            }

            .m-right {
                flex: 0 0 306px;

                .mr-recommend {
                    width: 100%;
                    //height: 595px;
                    border-width: 2px 1px 1px 1px;
                    border-color: #f32222 #eaeaea #eaeaea #eaeaea;
                    border-style: solid;
                    background: #fff;
                    padding: 15px;

                    .mrr-title {
                        height: 33px;
                        margin-bottom: 15px;
                        background: url("./images/recommend_title_img.png") no-repeat center center;
                        background-size: contain;
                    }

                    ul {
                        width: 100%;
                        //background: pink;
                        border-top: 1px solid #eaeaea;

                        li {
                            height: 125px;

                            a {
                                display: flex;
                                width: 100%;
                                height: 100%;
                                border-bottom: 1px solid #eaeaea;
                                justify-content: space-between;

                                img {
                                    flex: 0 0 113px;
                                    height: 87px;
                                    display: block;
                                    margin-top: 21px;
                                    transition: transform .2s ease-in-out .1s;
                                }

                                > div {
                                    padding-top: 31px;

                                    p {
                                        &:nth-of-type(1) {
                                            font-size: 16px;
                                            transition: transform .2s ease-in-out .1s;
                                        }

                                        &:nth-of-type(2) {
                                            font-size: 14px;
                                            margin-top: 6px;
                                            margin-bottom: 6px;

                                            i {
                                                color: #ff722a;
                                                font-style: normal;
                                            }
                                        }

                                        &:nth-of-type(3) {
                                            font-size: 14px;
                                        }
                                    }
                                }
                            }

                            &:hover {
                                a {
                                    img {
                                        transform: translateX(-2px);
                                    }
                                }

                                p {
                                    &:nth-of-type(1) {
                                        color: #ff0b0f;
                                        transform: translateX(3px);
                                    }
                                }
                            }
                        }
                    }

                    .huan {
                        display: block;
                        color: #ff0b0f;
                        font-size: 12px;
                        margin-top: 15px;
                        text-align: center;

                        img {
                            width: 12px;
                            height: 12px;
                            display: inline-block;
                            vertical-align: middle;
                            -webkit-backface-visibility: hidden;
                        }

                        i {
                            font-style: normal;
                            margin-left: 4px;
                        }

                        .runanimation {
                            animation: run360 1.5s linear infinite;
                        }
                    }
                }

                @keyframes run360 {
                    from {
                        transform: rotate(0deg);
                    }
                    to {
                        transform: rotate(360deg);
                    }
                }

                .mr-news {
                    width: 100%;
                    border: 1px solid #eaeaea;
                    background: #fff;
                    margin-top: 21px;
                    padding: 7px 6px 28px 6px;

                    .mrn-title {
                        height: 68px;

                        background: url("./images/news_title.png") no-repeat center center;
                        background-size: contain;
                    }

                    ul {
                        padding-left: 18px;
                        padding-right: 18px;
                        margin-top: 18px;

                        li {
                            width: 260px;
                            font-size: 16px;
                            color: #4f646a;
                            overflow: hidden; /*超出部分隐藏*/
                            white-space: nowrap; /*不换行*/
                            text-overflow: ellipsis; /*超出部分文字以...显示*/
                            position: relative;
                            margin-bottom: 10px;

                            &:nth-child(-n+3) {
                                &:before {
                                    background-color: #f32222;
                                }
                            }

                            &::before {
                                content: '';
                                position: absolute;
                                top: 50%;
                                transform: translateY(-50%);
                                left: 0;
                                width: 7px;
                                height: 7px;
                                border-radius: 50%;
                                background-color: #4f646a;
                            }

                            a {
                                padding-left: 15px;

                                &:hover {
                                    color: #f32222;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>
